<template>
   <div class="layout">
      <router-view></router-view>

      <footer>
         <div>
            <router-link exact-active-class="active" to="/index">
               <i class="icon icon1"></i>
               <p>首页</p>
            </router-link>
            <router-link exact-active-class="active" to="/ClassificationView">
               <i class="icon icon2"></i>
               <p>分类</p>
            </router-link>
            <router-link exact-active-class="active" to="/CartView">
               <i class="icon icon4"></i>
               <p>购物车</p>
            </router-link>
            <router-link exact-active-class="active" to="/My">
               <i class="icon icon5"></i>
               <p>我的</p>
            </router-link>
         </div>
      </footer>
   </div>
</template>

<style lang="less" scoped>
footer {
   position: sticky;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50px;
   background-color: #fff;
   font-size: 10px;
   text-align: center;
   z-index: 1000;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   // line-height: 60px;

   >div {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: space-around;
      align-items: center;

      a {
         // flex-basis: 20%;
         flex-grow: 1;
         text-align: center;
         -webkit-tap-highlight-color: transparent;
         color: #333;

         .icon1 {
            background-image: url(./assets/img/home.png);
         }

         .icon2 {
            background-image: url(./assets/img/find.png);
         }

         .icon3 {
            background-image: url(./assets/img/like.png);
         }

         .icon4 {
            background-image: url(./assets/img/shopping.png);
         }

         .icon5 {
            background-image: url(./assets/img/me.png);
         }
      }

      a.active {
         color: #ff0000;

         .icon1 {
            background-image: url(./assets/img/home_on.png);
         }

         .icon2 {
            background-image: url(./assets/img/find_on.png);
         }

         .icon3 {
            background-image: url(./assets/img/like_on.png);
         }

         .icon4 {
            background-image: url(./assets/img/shopping_on.png);
         }

         .icon5 {
            background-image: url(./assets/img/me_on.png);
         }
      }

   }
}

[class^="icon"] {
   display: inline-block;
   width: 20px;
   height: 20px;
   background-size: cover;
   background-repeat: no-repeat;
}
</style>